<template>
	<cl-crud @load="onLoad">
		<template #slot-btn>
			<el-button
				type="primary"
				size="mini"
				@click="batchFiled()"
				:disabled="selectRow.length > 0 ? false : true"
				>取消选择推广</el-button
			>
		</template>
		<template #slot-filter>
			<div class="filter-bar">
				<div class="filter-li" style="margin-left: 10px">
					<span style="font-size: 12px">推广状态：</span>
					<el-select
						v-model="selects.status"
						size="mini"
						placeholder="请选择推广状态"
						@change="val => refresh({ status: val, page: 1 })"
					>
						<el-option label="全部" value></el-option>
						<el-option label="正在推广" :value="1"></el-option>
						<el-option label="取消推广" :value="0"></el-option>
					</el-select>
				</div>
			</div>
		</template>
		<template #table-column-pic="{ scope }">
			<img :src="scope.row.pic" style="width: 100px" />
		</template>
		<template #table-column-goodsInfo="{ scope }">
			<div class="goods-info">
				<p class="title">{{ scope.row.title }}</p>
				<p class="brief">{{ scope.row.brief }}</p>
				<img
					v-if="scope.row.shoptype === 1"
					src=""
				/>
				<span v-if="scope.row.isEditor === 1">精编素材</span>
			</div>
		</template>
		<template #table-column-price="{ scope }">
			<p class="old-price">{{ scope.row.price }}</p>
			<p class="end-price">{{ scope.row.endPrice }}</p>
		</template>
		<template #table-column-commissionRate="{ scope }">
			<p class="commission-rate">{{ scope.row.commissionRate }}%</p>
			<p class="commission-money">
				{{ ((parseFloat(scope.row.endPrice) * scope.row.commissionRate) / 100).toFixed(2) }}
			</p>
		</template>
		<template #table-column-coupon="{ scope }">
			<p class="coupon-money">{{ scope.row.couponMoney }}元</p>
			<p class="coupon-receive">已领：{{ scope.row.couponReceive }}</p>
			<p class="coupon-num">全部：{{ scope.row.couponNum }}</p>
		</template>
		<template #table-column-time="{ scope }">
			{{ scope.row.couponStarttime }}<br />
			~<br />
			{{ scope.row.couponEndtime }}
		</template>
		<template #table-column-status="{ scope }">
			<el-tag type="primary" v-if="scope.row.status === 1">正在推广</el-tag>
			<el-tag type="success" v-if="scope.row.status === 0">取消推广</el-tag>
		</template>
		<template #slot-edit="{ scope }">
			<el-button type="text" @click="share(scope.row)" v-if="scope.row.status === 0"
				>设为推广</el-button
			>
			<el-button type="text" @click="cancel(scope.row)" v-else>取消推广</el-button>
		</template>
	</cl-crud>
</template>

<script>
import moment from 'moment';
export default {
	name: 'goods',
	data() {
		return {
			selects: {
				status: ''
			},
			selectRow: []
		};
	},
	methods: {
		onLoad({ ctx, app }) {
			this.crud = app;
			ctx.service(this.$service.promotion.goodsPromote)
				.set('table', {
					columns: [
						{
							type: 'selection',
							label: '全选',
							align: 'center',
							width: '60px'
						},
						{
							label: '提交时间',
							prop: 'createTime',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '主图',
							prop: 'pic',
							align: 'center'
						},
						{
							label: '标题',
							prop: 'goodsInfo',
							align: 'center',
							minWidth: 250
						},
						{
							label: '券后价',
							prop: 'price',
							align: 'center'
						},
						{
							label: '佣金',
							prop: 'commissionRate',
							align: 'center'
						},
						{
							label: '优惠券',
							prop: 'coupon',
							align: 'center',
							sortable: 'custom'
						},
						{
							label: '起止时间',
							prop: 'time',
							align: 'center',
							minWidth: 120
						},
						{
							label: '推广单数',
							prop: 'orderNum',
							align: 'center'
						},
						{
							label: '状态',
							prop: 'status',
							align: 'center'
						}
					],
					props: {
						'default-sort': {
							prop: 'createTime',
							order: 'descending'
						}
					},
					op: {
						layout: ['slot-edit']
					},
					on: {
						'selection-change': selection => {
							this.selectRow = selection;
						}
					}
				})
				.set('layout', [
					['refresh-btn', 'slot-btn', 'slot-filter'],
					['data-table'],
					['flex1', 'pagination']
				])
				.on('refresh', async (params, { next, render }) => {
					const { list } = await next(params);
					list.forEach(item => {
						item.couponStarttime = moment(parseInt(item.couponStarttime) * 1000).format(
							'YYYY-MM-DD HH:mm:ss'
						);
						item.couponEndtime = moment(parseInt(item.couponEndtime) * 1000).format(
							'YYYY-MM-DD HH:mm:ss'
						);
					});
					render(list);
				})
				.done();
			app.refresh();
		},
		refresh(params) {
			this.crud.refresh(params);
		},
		share(item) {
			this.$confirm('该操作会将商品设置推广，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '设置推广',
				cancelButtonText: '考虑一下'
			})
				.then(() => {
					this.$service.promotion.goodsPromote
						.update({
							ids: item.id,
							status: 1
						})
						.then(() => {
							this.$message({
								type: 'success',
								message: '操作成功'
							});
							this.crud.refresh();
						})
						.catch(err => this.$message.error(err));
				})
				.catch(() => {});
		},
		cancel(item) {
			this.$confirm('该操作会取消商品推广，是否确认？', '提示', {
				type: 'warning',
				confirmButtonText: '取消推广',
				cancelButtonText: '考虑一下'
			})
				.then(() => {
					this.$service.promotion.goodsPromote
						.update({
							ids: item.id,
							status: 0
						})
						.then(() => {
							this.$message({
								type: 'success',
								message: '操作成功'
							});
							this.crud.refresh();
						})
						.catch(err => this.$message.error(err));
				})
				.catch(() => {});
		},
		// 批量操作
		batchFiled() {
			let idsArr = [];
			this.selectRow.forEach(item => {
				idsArr.push(item.id);
			});
			this.$service.promotion.goodsPromote
				.update({
					status: 0,
					ids: idsArr.join(',')
				})
				.then(() => {
					this.$message({
						type: 'success',
						message: '操作成功'
					});
					this.crud.refresh();
				});
		}
	}
};
</script>

<style lang="stylus" scoped>
.goods-info {
    text-align left
    .title {
        color: #3b3b3b
        font-weight 600
    }
    .brief{
        color: #a4a4a4
        font-size 12px
        textOverflow(2)
    }
    span {
        background #00d2b7
        color #fff
        font-size 12px
        margin-left 10px
        padding 2px 4px
    }
}
    .old-price {
        text-decoration line-through
    }
    .end-price, .commission-money {
        color $main-color
        font-size 18px
    }
    .coupon-money {
        color: #a4a4a4
        padding 2px 14px
        width fit-content
        margin 0 auto
        border 1px solid #a4a4a4
        margin-bottom 10px
    }
    .coupon-receive {
        color $main-color
    }
    .coupon-num {
        color: #a4a4a4
    }
</style>
